<template>
<div class="formTable">
  <div style="margin: 20px 0 5px 0" v-if="status=='edit' || status=='add'">
    <el-button type="primary" @click="addCol"><i class="el-icon-plus" style="margin-right: 5px" ></i>新建</el-button>
    <el-button @click="selection" v-if="tableState!='xmys'"><i class="el-icon-money" style="margin-right: 5px;color: #4AB7BD"></i>多选任务</el-button>
    <el-button @click="selFeeType" v-if="tableState=='xmys'"><i class="el-icon-money" style="margin-right: 5px;color: #4AB7BD"></i>选择费用类型</el-button>
    <el-button @click="delRow"><i class="el-icon-delete" style="margin-right: 5px;color: #E65D6E"></i>删除</el-button>
    <el-button @click="delAll"><i class="el-icon-delete" style="margin-right: 5px;color: #E65D6E"></i>删除全部</el-button>
    <el-button @click="reportData" v-if="tableState=='xmys'"  ><i class="el-icon-upload" style="margin-right: 5px;color: #18be6b"></i>导入数据</el-button>
  </div>
  <div style="margin-top: 15px">
    <el-form :model="formData" :rules="rules" ref="ruleForm" label-width="60px">
      <el-table :data="formData.data" border style="width: 100%" :header-cell-style="{backgroundColor: '#e7f6f3'}" @selection-change="handleSelectionChange" >
        <el-table-column type="selection" width="55" fixed="left" v-if="status=='edit' || status=='add'"></el-table-column>
        <el-table-column prop="id" width="60" label="序号" align="center" v-if="showIdx"></el-table-column>
        <el-table-column
          v-for="(i, idx) in tableColumns"
          :key="'col' + idx"
          :prop="i.prop"
          :label="i.label"
          :align="i.align"
          :width="i.width"
          :fixed="i.fixed"
        >
          <el-table-column
            v-if="i.children"
            v-for="(ii, iidx) in i.children"
            :key="'col' + iidx"
            :prop="ii.prop"
            :label="ii .label"
            :align="ii.align"
            :width="ii.width"
            :fixed="ii.fixed"
          >
            <template slot-scope="scope">
              <div>
                <el-form-item label-width="0" v-if="status=='edit' || status=='add'">
                  <el-input placeholder="请输入" v-model="scope.row[ii.prop]" clearable v-if="ii.type=='input'"></el-input>
                  <el-date-picker
                    v-model="scope.row[ii.prop]"
                    type="date"
                    placeholder="选择日期"
                    style="width: 100%"
                    v-if="ii.type=='date'">
                  </el-date-picker>
                  <el-checkbox v-model="scope.row[ii.prop]" v-if="ii.type=='checkbox'"></el-checkbox>
                </el-form-item>
                <span v-else>{{ scope.row[ii.prop] ? scope.row[ii.prop] : "" }}</span>
              </div>
            </template>
          </el-table-column>
          <template slot-scope="scope">
            <div>
              <el-form-item label-width="0" v-if="status=='edit' || status=='add'">
                <el-input placeholder="请输入" v-model="scope.row[i.prop]" clearable v-if="i.type=='input'"></el-input>
                <el-date-picker
                  v-model="scope.row[i.prop]"
                  type="date"
                  placeholder="选择日期"
                  style="width: 100%"
                  v-if="i.type=='date'">
                </el-date-picker>
                <el-checkbox v-model="scope.row[i.prop]" v-if="i.type=='checkbox'"></el-checkbox>
              </el-form-item>
              <span v-else>{{ scope.row[i.prop] ? scope.row[i.prop] : "" }}</span>
            </div>
          </template>
        </el-table-column>
      </el-table>
    </el-form>
  </div>
</div>
</template>

<script>
export default {
  name: "formTable",
  data(){
    return{
      count: 0,
      formData:{
        data:[],
      },
      rules:{},
      multipleSelection:[]
    }
  },
  props:{
    tableState:{
      type: String,
      default: ''
    },
    tableColumns:{
      type: Array,
      default: ()=>[]
    },
    tableData:{
      type: Array,
      default: ()=>[]
    },
    defaultData:{
      type: Array,
      default: ()=>[]
    },
    showIdx:{
      type: Boolean,
      default: true
    },
    status:{
      type: String,
      default: 'add'
    }
  },
  watch:{
    tableData:{
      handler(val) {
        this.tableData.forEach((e,index)=>{
          e.id=index+1
        })
        this.formData.data = this.tableData
      },
      immediate: true,
    }
  },
  mounted() {
    this.tableData.forEach((e,index)=>{
      e.id=index+1
    })
    this.formData.data = this.tableData
  },
  methods:{
    //新增一条
    addCol(){
      this.formData.data.forEach((e,index)=>{
        e.id=index+1
      })
      const data = {}
      let index = this.formData.data.length
      this.defaultData.map(item =>{
        data[item]= ''
        data.id = index+1
      })
      this.formData.data = [...this.formData.data, data]
    },
    //勾选
    handleSelectionChange(val){
      this.multipleSelection = val;
    },
    //删除选中
    delRow(){
      if(this.multipleSelection.length!==1){
        this.$message.warning('请选择一条要删除的数据！')
      }else {
        let index = this.multipleSelection[0].id;
        this.formData.data.splice(index-1, 1);
        this.formData.data.forEach((e,index)=>{
          e.id=index+1
        })
      }
    },
    //删除全部
    delAll(){
      this.formData.data = []
    },
    //多选任务
    selection(){
      this.$modal.msg('多选任务');
    },
    //选择费用类型
    selFeeType(){
      this.$modal.msg('选择费用类型 ');
    },
    //导入数据
    reportData(){
      this.$modal.msg('导入数据 ');
    }
  }
}
</script>

<style scoped lang="scss">
.formTable{
  ::v-deep{
    .el-table th.el-table__cell.is-leaf, .el-table td.el-table__cell {
      border-bottom: 1px solid #dfe6ec !important;
    }
  }
}
</style>
